<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表白墙</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        .container {
            width: 400px;
            margin: 0 auto;
        }

        .container h1 {
            margin: 20px 0;
            text-align: center;
        }

        .container .sub-title {
            color: #666;
            text-align: center;
            font-size: 14px;
            margin-bottom: 10px;
        }

        .container .row {
            width: 100%;
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .container span {
            width: 80px;
        }

        .container input {
            width: 200px;
            height: 30px;
        }

        .container .row>button {
            width: 280px;
            height: 30px;
            background-color: orange;
            border: none;
            color: white
        }

        .container .row>button:active {
            background-color: #666;
        }

        .container .message {
            padding: 20px;
            text-align: center;
        }

        .message p {
            height: 30px;
            line-height: 30px;
        }
    </style>
    <!-- 引入jQuery -->
    <script src="./js/jquery-3.6.3.min.js"></script>
</head>

<body>
    <div class="container">
        <h1>表白墙</h1>
        <p class="sub-title">输入后点击提交，会将内容显示在表格中</p>
        <div class="row">
            <span>谁：</span>
            <input type="text">
        </div>
        <div class="row">
            <span>对谁：</span>
            <input type="text">
        </div>
        <div class="row">
            <span>说什么</span>
            <input type="text">
        </div>
        <div class="row">
            <button id="submit">提交</button>
        </div>

        <!-- 用来调试样式 -->
        <div class="message">
            <!-- <p><b>唐僧</b> 对 <b>悟空</b>说：<b>为师有点饿了.</b></p>
            <p><b>唐僧</b> 对 <b>悟空</b>说：<b>为师有点饿了.</b></p>
            <p><b>唐僧</b> 对 <b>悟空</b>说：<b>为师有点饿了.</b></p>
            <p><b>唐僧</b> 对 <b>悟空</b>说：<b>为师有点饿了.</b></p> -->

        </div>
    </div>
</body>
<script>
    // 1. 获取相关的元素
    let submitBtnEl = document.querySelector('#submit');
    let inputEls = document.querySelectorAll('input');
    let messageEl = document.querySelector('.message');

    // 绑定事件
    submitBtnEl.onclick = function () {
        // 2. 处理用户输入的内容
        let sender = inputEls[0].value;
        let receiver = inputEls[1].value;
        let content = inputEls[2].value;
        // 非空校验
        if (sender == '' || receiver == "" || content == "") {
            alert('请正确输入内容');
            return;
        }
        // 3. 构造表白结果
        let str = '<b>' + sender + '</b> 对 <b>' + receiver + '</b>说：<b>' + content + '.</b>'
        // 4. 构建一个p标签 
        let messageRow = document.createElement('p');
        messageRow.innerHTML = str;
        // 4. 把结果加入到表白墙上
        messageEl.appendChild(messageRow)
        // 5. 清空输入框中的内容
        inputEls.forEach(element => {
            element.value = '';
        });

        // 处提交逻辑
        // 1. 封装JSON对象
        let postJson = {
            "sender" : sender,
            "receiver": receiver,
            "content" : content
        };
        let jsonStr = JSON.stringify(postJson);
        console.log(jsonStr);
        // 2. 提交ajax请求
        $.ajax({
            // 请求使用的方法
            type: 'post',
            // 请求的URL，注意不要加斜杠
            url: 'message',
            // 格式
            contentType: 'application/json',
            // 发送的数据
            data: jsonStr,
            // 成功时的回调
            success : function(data) {
                console.log(data);
            }
        })
    };

    // 发送请求获取已有留言
    $.ajax({
         // 请求使用的方法
         type: 'get',
        // 请求的URL，注意不要加斜杠
        url: 'message',
        // 回调
        success: function (data) {
            data.forEach(element => {
                console.log(element);
                // <p><b>唐僧</b> 对 <b>悟空</b>说：<b>为师有点饿了.</b></p>
                // 1. 创建一个P标签
                let pEl = document.createElement('p');
                // 2. 构造内容
                pEl.innerHTML = '<b>'+element.sender+'</b> 对 <b>'+element.receiver+'</b>说：<b>'+element.content+'.</b>'
                // 3. 加入到父标签下
                messageEl.appendChild(pEl);

            });
            // 结果是一个数组，遍历结果
            // for (let index = 0; index < data.length; index++) {
            //     element = data[index];
            //     console.log(element);
            // }
            
        }
    });

</script>

</html>